<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      class="terminal-list"
      style="margin-bottom:20px;"
    >
      <item-title title="变更交易终端列表" />
      <el-table
        :data="detail?.devs"
        :max-height="400"
        size="small"
        header-cell-class-name="table-header"
        border
      >
        <el-table-column
          prop="terminalNo"
          label="终端编号"
          header-align="center"
          align="center"
          :width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="terminalName"
          label="终端名称"
          header-align="center"
          :min-width="160"
          show-overflow-tooltip
        >
          <template #default="scope">
            <my-link
              :underline="false"
              @click="toTerminalDetail(scope.row)"
            >{{ scope.row.terminalName }}</my-link>
          </template>
        </el-table-column>
        <el-table-column
          label="终端所在地区"
          header-align="center"
          :min-width="160"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div>
              <span v-if="scope.row.provinceName">{{ scope.row.provinceName }}</span>
              <span v-if="scope.row.cityName">{{ scope.row.provinceName&&scope.row.cityName?' / ':'' }}{{ scope.row.cityName }}</span>
              <span v-if="scope.row.areaName">{{ scope.row.cityName&&scope.row.areaName?' / ':'' }}{{ scope.row.areaName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="产品信息"
          header-align="center"
          :min-width="160"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>{{ getProductName(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="terminalPrice"
          label="终端价（元）"
          header-align="center"
          align="center"
          :min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="agentName"
          label="渠道客户名称"
          header-align="center"
          :min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="当前配送商"
          header-align="center"
          :min-width="160"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="toDistributeDetail(scope.row)"
            >{{ scope.row.distributeName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="当前配送费"
          header-align="center"
          :min-width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div v-if="scope.row.computeMode==='固定价格'">
              <span>{{ scope.row.distributePrice }}元</span><span v-if="scope.row.sellUnit"> / {{ getLabel('sell_unit',scope.row.sellUnit) }}</span>
            </div>
            <div v-if="scope.row.computeMode==='终端价百分比'">
              <span>{{ scope.row.distributePrice }}%</span><span>终端价</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="distributeServeNo"
          label="当前关联配送服务编号"
          header-align="center"
          :min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="更新后配送费"
          header-align="center"
          :min-width="140"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div v-if="detail.rddType==='2'">
              <div v-if="detail.distributeDetailInfo?.computeMode==='固定价格'">
                <span>{{ detail.distributeDetailInfo?.distributePrice }}元</span>
                <span v-if="detail.distributeDetailInfo?.sellUnit">/{{ getLabel('sell_unit',detail.distributeDetailInfo?.sellUnit) }}</span>
              </div>
              <div v-if="detail.distributeDetailInfo?.computeMode==='终端价百分比'">
                <span>{{ detail.distributeDetailInfo?.distributePrice }}%</span>
                <span>终端价</span>
              </div>
            </div>
            <div v-else>0元</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="distribute-service">
      <item-title title="更新后使用的配送服务" />
      <el-form
        v-if="detail"
        class="form-detail"
        label-position="right"
        label-width="120px"
        style="padding-left:20px;"
      >
        <el-row
          :gutter="20"
          style="width:100%"
        >
          <el-col :span="8">
            <el-form-item label="配送商名称：">
              <div v-if="detail.rddType==='2'">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="toDistributeDetail(null)"
                >{{ detail.distributeInfo?.distributeName }}</el-link>
              </div>
              <div v-else>厂家配送</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送产品信息：">
              <div>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="toProductDetail"
                >{{ getProductName(detail.productInfo) }}</el-link>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="配送费：">
              <div v-if="detail.rddType==='2'">
                <div v-if="detail.distributeDetailInfo?.computeMode==='固定价格'">
                  <span>{{ detail.distributeDetailInfo?.distributePrice }}元</span>
                  <span v-if="detail.distributeDetailInfo?.sellUnit">/{{ getLabel('sell_unit',detail.distributeDetailInfo?.sellUnit) }}</span>
                </div>
                <div v-if="detail.distributeDetailInfo?.computeMode==='终端价百分比'">
                  <span>{{ detail.distributeDetailInfo?.distributePrice }}%</span>
                  <span>终端价</span>
                </div>
              </div>
              <div v-else>0元</div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="detail.rddType==='2'"
            :span="8"
          >
            <el-form-item label="配送服务编号：">
              <div>{{ detail.distributeDetailInfo?.distributeServeNo }}</div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="detail.rddType==='2'"
            :span="8"
          >
            <el-form-item label="配送地区：">
              <area-list-view :areas="detail.distributeDetailInfo?.region" />
            </el-form-item>
          </el-col>
          <el-col
            v-if="detail.rddType==='2'"
            :span="8"
          >
            <el-form-item label="关联配送合同：">
              <div v-if="detail.distributeDetailInfo?.contractNumber">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="toContractDetail"
                >{{ detail.distributeDetailInfo?.contractNumber }}</el-link>
              </div>
              <div v-else>无</div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="detail.rddType==='2'"
            :span="8"
          >
            <el-form-item label="服务结束日期：">
              <div>{{ dateFormat('yyyy-mm-dd', detail.distributeDetailInfo?.expireTime) }}</div>
            </el-form-item>
          </el-col>
          <el-col
            v-if="detail.rddType==='2'"
            :span="8"
          >
            <el-form-item
              label="配送时效约定："
              style="width: 100%"
            >
              <div>{{ detail.distributeDetailInfo?.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 产品详情 -->
    <detail-drawer
      ref="proDetailDrawer"
      custom-title
    >
      <template #title>
        <span>产品详情 {{ getProductName(detail?.productInfo) }}</span>
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <product-base-info
              v-if="productId"
              :id="productId"
            />
          </div>
          <div class="history-list">
            <item-title title="操作记录" />
            <operation-view
              v-if="productId"
              :id="productId"
              mode="product"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--合同详情-->
    <detail-drawer
      ref="contractDrawer"
      custom-title
    >
      <template #title>
        <span>合同 {{ detail?.distributeDetailInfo?.contractName }} </span>
      </template>
      <template #contents>
        <div
          v-if="contractId"
          class="drawer-content"
        >
          <div class="history-list">
            <contract-detail
              ref="salesDetailDrawer"
              :contract-id="contractId"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--配送商详情-->
    <detail-drawer
      ref="distributeDrawer"
      custom-title
      :size-width="1000"
    >
      <template #title>
        <span>配送商 {{ rowData?.distributeName }} </span>
      </template>
      <template
        v-if="distributeId"
        #contents
      >
        <div class="drawer-content">
          <div class="history-list">
            <distributor-info :id="distributeId" />
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--终端详情-->
    <detail-drawer
      ref="terminalDrawer"
      custom-title
      :size-width="1000"
    >
      <template #title>
        <span>终端 {{ rowData?.terminalName }} </span>
      </template>
      <template
        v-if="terminalId"
        #contents
      >
        <div class="drawer-content">
          <div class="history-list">
            <terminal-info :id="terminalId" />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, reactive, toRefs, watch} from 'vue'

export default {
  name: 'DistributorServiceInfo',
  components: {
    productBaseInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/product/productBaseInfo.vue'
      )
    ),
    contractDetail: defineAsyncComponent(() =>
      import('@CRM/views/commonView/contract/contractDetail.vue')
    ),
    distributorInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/distributor/distributorInfo.vue'
      )
    ),
    terminalInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/terminal/terminalInfo.vue')
    ),
  },
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detail: {},
      detailData: props.detailData,
      proDetailDrawer: null,
      contractDrawer: null,
      distributeDrawer: null,
      terminalDrawer: null,
      distributeId: 0,
      productId: 0,
      terminalId: 0,
      contractId: 0,
      rowData: null,
    })
    const toContractDetail = () => {
      console.log(reactiveData.detail)
      reactiveData.contractId =
        reactiveData.detail.distributeDetailInfo?.contractId
      reactiveData.contractDrawer.open()
    }
    const toProductDetail = () => {
      reactiveData.productId = reactiveData.detail.productId
      reactiveData.proDetailDrawer.open()
    }
    const toDistributeDetail = (row) => {
      if (row) {
        reactiveData.rowData = row
        reactiveData.distributeId = row?.distributeId
      } else {
        reactiveData.rowData = reactiveData.detail?.distributeInfo
        reactiveData.distributeId = reactiveData.detail?.distributeId
      }
      reactiveData.distributeDrawer.open()
    }
    const toTerminalDetail = (row) => {
      reactiveData.rowData = row
      reactiveData.terminalId = row.terminalId
      reactiveData.terminalDrawer.open()
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.detail = newval.data
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      toContractDetail,
      toProductDetail,
      toDistributeDetail,
      toTerminalDetail,
    }
  },
}
</script>

<style scoped>
</style>
